import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
// import { FormInstance } from 'antd/lib/form';
import { Modal, Button, message, Input, Form, Col, Row, Timeline, Descriptions,Card } from 'antd';
import style from './index.less';
// import { styleRequired } from '../../../support/constant/common.js';
// import { encryptedData } from '@/utils/utils';
// import { publicKey } from "../../../../public/global";

// const FormItem = Form.Item;

const mapStateToProps = (state: any) => ({
    remoteController: state.remoteController,
    loading: state.loading.effects['remoteController/getFetchPage'],
});
class DetailModal extends PureComponent<any, any> {
    state = {
       show1: true,
       show2: false,
       show3: false,
       show4: false,
       show5: false,
       show6: false,
       show7: false,
       bgColor1: "#F8F8FF",
       bgColor2: "",
       bgColor3: "",
       bgColor4: "",
       bgColor5: "",
       bgColor6: "",
       bgColor7: "",
      };

    // componentDidUpdate() {
    //     // const { record } = this.props;
    //     // if (record) {
    //     //     this.setState({ sid: record.sid });
    //     // }
    // }

    // getLabel = (lable: any) => <span><span style={styleRequired}>* </span>{lable}</span>;

    // ok = (values: any) => {
    //     const { dispatch, formValues, pageObj } = this.props;
    //     const { sid } = this.state;
    //     // 密码使用RSA加密
    //     const accountPwd = encryptedData(values.accountPwd, publicKey); 
    //     const obj = {
    //         currentPwd: accountPwd,
    //         sid: sid
    //     };
    //     dispatch({
    //         type: 'account/postObjWithRes',
    //         payload: {
    //             url: '/account/resetpwd',
    //             ...obj
    //         },
    //         callback: (response: any) => {
    //             if (response.statusCode === '0') {
    //                 let params = { ...formValues, page: pageObj.current, size: pageObj.pageSize }
    //                 this.close();
    //                 message.success('操作成功');
    //                 dispatch({
    //                     type: "account/postFetchPage",
    //                     payload: { url: "/account/findbypage", ...params }
    //                 })
    //             }
    //         }
    //     })
    // };

    close = () => {
        const { closeModal } = this.props;
        closeModal();
        this.setState({
            show1: true,
            show2: false,
            show3: false,
            show4: false,
            show5: false,
            show6: false,
            show7: false,
            bgColor1: "#F8F8FF",
            bgColor2: "",
            bgColor3: "",
            bgColor4: "",
            bgColor5: "",
            bgColor6: "",
            bgColor7: "",
        })
        // this.formRef.current?.resetFields();
    }

    // submitSave = () => {
    //     this.formRef.current?.submit();
    // }

    // checkPwd = (rule: any, value: any) => {

    //     const { menu: { pwdStrategy: { pwdStrategy, pwdStrategyDesc } } } = this.props;
    //     if (value) {
    //         const regex = new RegExp(pwdStrategy);
    //         if (!regex.test(value)) {
    //             return Promise.reject(`请输入正确的密码，${pwdStrategyDesc}`);
    //         }
    //     } else {
    //         return Promise.reject('请输入密码');
    //     }
    //     return Promise.resolve();
    // }
    clc1 =() =>{
       console.log('点击了1')
       this.setState({
        show1: true,
        show2: false,
        show3: false,
        show4: false,
        show5: false,
        show6: false,
        show7: false,
        bgColor1: "#F8F8FF",
        bgColor2: "",
        bgColor3: "",
        bgColor4: "",
        bgColor5: "",
        bgColor6: "",
        bgColor7: "",
       })
    }
    clc2 =() =>{
        console.log('点击了2')
        this.setState({
         show1: false,
         show2: true,
         show3: false,
         show4: false,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "#F8F8FF",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc3 =() =>{
        console.log('点击了3')
        this.setState({
         show1: false,
         show2: false,
         show3: true,
         show4: false,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "#F8F8FF",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc4 =() =>{
        console.log('点击了4')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: true,
         show5: false,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "#F8F8FF",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc5 =() =>{
        console.log('点击了5')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: true,
         show6: false,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "#F8F8FF",
         bgColor6: "",
         bgColor7: "",
        })
     }
     clc6 =() =>{
        console.log('点击了6')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: false,
         show6: true,
         show7: false,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "#F8F8FF",
         bgColor7: "",
        })
     }
     clc7 =() =>{
        console.log('点击了7')
        this.setState({
         show1: false,
         show2: false,
         show3: false,
         show4: false,
         show5: false,
         show6: false,
         show7: true,
         bgColor1: "",
         bgColor2: "",
         bgColor3: "",
         bgColor4: "",
         bgColor5: "",
         bgColor6: "",
         bgColor7: "#F8F8FF",
        })
     }
    render() {
        const { modalVisible, loading, detailData, colorData: {color1, color2,color3,color4,color5,color6,color7}} = this.props;
        const footer = (
            <div>
                <Button size="default" onClick={this.close}>关闭</Button>
            </div>
        );
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
                md: { span: 16 },
            },
        };
        const  jsonData = JSON.stringify(detailData.requestParam, null, 4);
        // const cloneDeep = JSON.parse(JSON.stringify(detailData))
        // console.log('参照', data);
        console.log('colorData',this.props.colorData);
        return (
            <Modal
                style={{ top: 20 }}
                footer={footer}
                title="日志详情"
                visible={modalVisible}
                onCancel={this.close}
                width="90%"
            >
                <Row>
                   <Col span={8}>
                    <Card bordered={false}>
                   <Timeline mode={"left"}>
                    <Timeline.Item color={color1} label={detailData.requestTime} onClick={this.clc1} >
                        {<div style={{background: this.state.bgColor1}}>{"TSP-->连接平台下发请求"}</div> }
                    </Timeline.Item>
                    <Timeline.Item color={color2} label={detailData.smsTime} onClick={this.clc2} >
                        {<div style={{background: this.state.bgColor2}}>{"连接平台-->TBOX下发唤醒短信"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color3} label={detailData?.dcvpRequest?.dcvpRequestTime}  onClick={this.clc3}>
                        {<div style={{background: this.state.bgColor3}}>{"连接平台-->TBOX下发控制指令"}</div> }
                    </Timeline.Item> 
                    <Timeline.Item color={color4} label={detailData?.tboxAck?.tboxAckTime} onClick={this.clc4}>
                        {<div style={{background: this.state.bgColor4}}>{"TBOX-->连接平台回复指令ACK"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color5} label={detailData?.dcvpAck?.dcvpAckTime} onClick={this.clc5}>
                        {<div style={{background: this.state.bgColor5}}>{"连接平台-->TSP回复响应结果"}</div> }
                    </Timeline.Item>
                    <Timeline.Item color={color6} label={detailData?.tboxResult?.tboxResultTime} onClick={this.clc6}>
                        {<div style={{background: this.state.bgColor6}}>{"TBOX-->连接平台回复执行结果"}</div> } 
                    </Timeline.Item>
                    <Timeline.Item color={color7} label={detailData?.dcvpResult?.dcvpResultTime}   onClick={this.clc7}>
                        {<div style={{background: this.state.bgColor7}}>{"连接平台--TSP回复执行结果"}</div> } 
                    </Timeline.Item>

                       {/* <Timeline.Item color={color1} label={<div style={{background: this.state.bgColor1}}>{"TSP-->连接平台下发请求"}</div> } onClick={this.clc1} >{detailData.requestTime}</Timeline.Item> */}
                       {/* <Timeline.Item color={color2} label={<div style={{background: this.state.bgColor2}}>{"连接平台-->TBOX下发唤醒短信"}</div> } onClick={this.clc2} >{detailData.smsTime}</Timeline.Item>
                       <Timeline.Item color={color3} label={<div style={{background: this.state.bgColor3}}>{"连接平台-->TBOX下发控制指令"}</div> }  onClick={this.clc3}>{detailData?.dcvpRequest?.dcvpRequestTime}</Timeline.Item> 
                       <Timeline.Item color={color4} label={<div style={{background: this.state.bgColor4}}>{"TBOX-->连接平台回复指令ACK"}</div> } onClick={this.clc4}>{detailData?.tboxAck?.tboxAckTime}</Timeline.Item>
                       <Timeline.Item color={color5} label={<div style={{background: this.state.bgColor5}}>{"连接平台-->TSP回复响应结果"}</div> } onClick={this.clc5}>{detailData?.dcvpAck?.dcvpAckTime}</Timeline.Item>
                      <Timeline.Item color={color6} label={<div style={{background: this.state.bgColor6}}>{"TBOX-->连接平台回复执行结果"}</div> } onClick={this.clc6}>{detailData?.tboxResult?.tboxResultTime}</Timeline.Item>
                      <Timeline.Item color={color7} label={<div style={{background: this.state.bgColor7}}>{"连接平台--TSP回复执行结果"}</div> }   onClick={this.clc7}>{detailData?.dcvpResult?.dcvpResultTime}</Timeline.Item> */}
                   </Timeline>
                   </Card>
                   </Col>
                   <Col span={16}>
                    {this.state.show1 && (
                       <Card bordered={false}>
                            <Descriptions bordered title="TSP给连接平台下发请求">
                            <Descriptions.Item label={<div style={{width: '80px'}}>{"车辆VIN码"}</div> } span={3}>{detailData?.dcvpRequest?.vin}</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '80px'}}>{"控制类型"}</div> } span={3}>{detailData.ctlType}</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '80px'}}>{"请求时间"}</div> }  span={3}>{detailData.requestTime}</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '80px'}}>{"请求参数"}</div> } span={3}>
                                <pre>
                                {jsonData}
                                </pre>
                                </Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '80px'}}>{"流水号"}</div> } span={3}>{detailData.serialNum} </Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                    {this.state.show2 && (
                       <Card bordered={false}>
                            <Descriptions bordered title="下发唤醒短信">
                            <Descriptions.Item label={<div style={{width: '90px'}}>{"VIN码"}</div> } span={3}>xxxx</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '90px'}}>{"SIM卡号"}</div> } span={3}>yyyy</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '90px'}}>{"短信内容"}</div> }  span={3}>发过但是电费时段反而沃尔夫vdsvsdfvbsdfg额外人提问区分为规范热个无人敢惹我过分高危儿果然高温热工请问</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '90px'}}>{"短信发送时间"}</div> } span={3}>2022-05-31 09:53；58</Descriptions.Item>
                            <Descriptions.Item label={<div style={{width: '100px'}}>{"流短信发送结果"}</div> } span={3}>0 （成功）</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                    {this.state.show3 && (
                       <Card bordered={false}>
                            <Descriptions bordered title="连接平台下发控制指令">
                            <Descriptions.Item label={<div >{"协议版本号"}</div> } >xxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN"}</div> } >LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN标识"}</div> } >LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息ID"}</div> } >341241241421421414</Descriptions.Item>
                            <Descriptions.Item label={<div >{"服务类型"}</div> } >xxxxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息类型"}</div> } >4444455534r</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息发送时间"}</div> } >2022-08-19 04:23:12</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息版本号"}</div> } >v1.234</Descriptions.Item>
                            <Descriptions.Item label={<div >{"数据长度"}</div> } >213123</Descriptions.Item>
                            <Descriptions.Item label={<div >{"远程控制车门"}</div> } >0 （成功）</Descriptions.Item>
                            <Descriptions.Item label={<div>{"唯一流水号"}</div> } span={2}>123213124214124124</Descriptions.Item>
                            <Descriptions.Item label={<div >{"原始报文"}</div> } span={3}>12341234231432rwewdqrdqewwr3e</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                    {this.state.show4 && (
                       <Card bordered={false} >
                            <Descriptions bordered title="TBOX回复指令ACK">
                            <Descriptions.Item label={<div >{"协议版本号"}</div> } >xxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN"}</div> } >LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN标识"}</div> } >LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息ID"}</div> } >341241241421421414</Descriptions.Item>
                            <Descriptions.Item label={<div >{"服务类型"}</div> } >xxxxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息类型"}</div> } >4444455534r</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息发送时间"}</div> } >2022-08-19 04:23:12</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息版本号"}</div> } >v1.234</Descriptions.Item>
                            <Descriptions.Item label={<div >{"数据长度"}</div> } >213123</Descriptions.Item>
                            <Descriptions.Item label={<div >{"状态"}</div> } >0 （成功）</Descriptions.Item>
                            <Descriptions.Item label={<div>{"唯一流水号"}</div> } span={2}>123213124214124124</Descriptions.Item>
                            <Descriptions.Item label={<div >{"原始报文"}</div> } span={3}>12341234231432rwewdqrdqewwr3e</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                    {this.state.show5 && (
                       <Card bordered={false}>
                            <Descriptions bordered title="回复响应结果">
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"车辆VIN码"}</div> } span={3}>LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"连接层返回参数"}</div> } span={3}> <pre>
                                {jsonData}
                                </pre></Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"请求响应时间"}</div> } span={3}>2022-05-31 09:53:58</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"请求响应状态码"}</div> } span={3}>0（成功）</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"请求返回提示信息"}</div> } span={3}>success</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"流水号"}</div> } span={3}>4444455534r23423413423</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                     {this.state.show6 && (
                       <Card bordered={false} >
                            <Descriptions bordered title="TBOX回复执行结果">
                            <Descriptions.Item label={<div >{"协议版本号"}</div> } >v1.3454</Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN"}</div> } >LGJE5EE02NM026092 </Descriptions.Item>
                            <Descriptions.Item label={<div >{"设备VIN标识"}</div> } >2022-05-31 09:53:58</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息ID"}</div> } >234325345436345</Descriptions.Item>
                            <Descriptions.Item label={<div >{"服务类型"}</div> } >success</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息类型"}</div> } >4444455534r234</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息发送时间"}</div> } >2022-08-19 04:23:12</Descriptions.Item>
                            <Descriptions.Item label={<div >{"消息版本号"}</div> } >v1.234</Descriptions.Item>
                            <Descriptions.Item label={<div >{"数据长度"}</div> } >213123</Descriptions.Item>
                            <Descriptions.Item label={<div >{"控制车门结果"}</div> } >0 （成功）</Descriptions.Item>
                            <Descriptions.Item label={<div>{"控制车门错误码"}</div> }>123213124214124124</Descriptions.Item>
                            <Descriptions.Item label={<div >{"远控错误码"}</div> } >12341234231432rwewdqrdqewwr3e</Descriptions.Item>
                            <Descriptions.Item label={<div >{"车辆状态可用状态"}</div> } >0 （成功）</Descriptions.Item>
                            <Descriptions.Item label={<div>{"唯一流水号"}</div> }>123213124214124124</Descriptions.Item>
                            <Descriptions.Item label={<div >{"远控整车状态"}</div> } >ytyyyyyy</Descriptions.Item>
                            <Descriptions.Item label={<div >{"右后车门状态"}</div> } >0 （成功）</Descriptions.Item>
                            <Descriptions.Item label={<div>{"驾驶员侧锁状态"}</div> }>uuuuuuuu</Descriptions.Item>
                            <Descriptions.Item label={<div >{"空调运行状态"}</div> } >鹅鹅鹅饿饿</Descriptions.Item>
                            <Descriptions.Item label={<div >{"当前车内温度"}</div> } >67摄氏度</Descriptions.Item>
                            <Descriptions.Item label={<div>{"空调运行温度档位（手动空调）"}</div> }>yyyyyyy</Descriptions.Item>
                            <Descriptions.Item label={<div >{"空调运行风量档位（手动空调）"}</div> } >tttttttt</Descriptions.Item>
                            <Descriptions.Item label={<div >{"空调运行模式（手动空调）"}</div> } >sssssssss</Descriptions.Item>
                            <Descriptions.Item label={<div>{"空调运行进气模式（手动空调）"}</div> }>jjjjjjjjj</Descriptions.Item>
                            <Descriptions.Item label={<div >{"空调运行压缩机状态（手动空调）"}</div> } >hhhhhhhh</Descriptions.Item>
                            <Descriptions.Item label={<div >{"左前车窗状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"右前车窗状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"左后车窗状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"右后车窗状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"天窗控制状态"}</div> } >xxxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"车灯状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"危险报警灯状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"主驾座椅加热状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"副驾座椅加热状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"后备箱状态"}</div> } >xxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"鸣笛状态"}</div> } >xxxxxx</Descriptions.Item>
                            <Descriptions.Item label={<div >{"电源档位状态"}</div> } >eeeeee</Descriptions.Item>
                            <Descriptions.Item label={<div >{"哨兵模式状态"}</div> } >qqqqqq</Descriptions.Item>
                            <Descriptions.Item label={<div >{"天窗控制状态（后天窗）"}</div> } >44455555</Descriptions.Item>
                            <Descriptions.Item label={<div>{"座椅3状态"}</div> }>43234234</Descriptions.Item>
                            <Descriptions.Item label={<div >{"座椅4状态"}</div> } >ffffff</Descriptions.Item>
                            <Descriptions.Item label={<div >{"座椅5状态"}</div> } >ccccccc</Descriptions.Item>
                            <Descriptions.Item label={<div >{"座椅6状态"}</div> } >success</Descriptions.Item>
                            <Descriptions.Item label={<div >{"座椅7状态"}</div> } >4yyyyyyyy</Descriptions.Item>
                            <Descriptions.Item label={<div >{"充电盖（快）状态"}</div> } >iiiiiiii</Descriptions.Item>
                            <Descriptions.Item label={<div >{"充电盖（慢）状态"}</div> } >mmmmmmmm</Descriptions.Item>
                            <Descriptions.Item label={<div >{"停止充电状态"}</div> } span={3}>tryruturyytttrytry</Descriptions.Item>
                            <Descriptions.Item label={<div >{"原始报文"}</div> } span={3}>hfdgdfgstrygetrdfdsgdsg</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                     {this.state.show7 && (
                       <Card bordered={false} >
                            <Descriptions bordered title="连接平台回复远控结果">
                            <Descriptions.Item label={<div  style={{width: '90px'}}>{"车辆VIN码"}</div> } span={3}>LGJE5EE02NM026092</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '100px'}}>{"回复远控结果时间"}</div> } span={3}>2022-05-31 09:53:58</Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '90px'}}>{"回复远控结果"}</div> } span={3}> <pre>
                                {jsonData}
                                </pre></Descriptions.Item>
                            <Descriptions.Item label={<div  style={{width: '90px'}}>{"流水号"}</div> } span={3}>4444455534r23423413423</Descriptions.Item>
                           </Descriptions>
                           </Card>
                           )}
                   </Col>
                   
                </Row>

               
            </Modal>
        );
    }
}
export default connect(mapStateToProps)(DetailModal);